Firebase HostingでWebサイトをデプロイする
概要
Firebaseとは
Google Cloudの一部であるFirebaseですが、さまざまな機能が存在します。
元々はFirebase社が開始したサービスで、買収により統合された過去があるため、FirebaseのみでWebアプリなどの開発を完結できるほどリソースが充実しています。
今回はその中のFirebase Hostingに焦点を絞り、解説&ハンズオン形式で進めていきたいと思います。
Google Cloud Next '23
今年８月に参加したGoogle Cloud Next '23では、いくつかFirebtore関連のサービスをメインとしたセッションがありました。
Firebase Hostingはセッションのメインではないですが、FirestoreやCloud Storage for Firebaseよりも、サービス的な使い方のイメージがつきにくいのかな、と思いましたので今回ハンズオン形式にてブログにしました。
Firebase Hostingは、開始からデプロイまで素早く進められるので、webサイトを作成するにあたりかなり便利なツールだなと感じました。
【Firebase 参考セッション】
- Architecting enterprise apps with Firebase & Google Cloud Platform
- Cloud Run, Firestore, and Firebase: Serverless at your service
Firebase Hostingとは
Firebase Hosting はデベロッパー向けの、本番環境レベルのウェブ コンテンツ ホスティングです。1 つのコマンドですばやくウェブアプリをデプロイすることができ、静的コンテンツと動的コンテンツの両方をグローバル CDN（コンテンツ配信ネットワーク）に配信できます。
こちらは公式ページに記載のある文言ですが、バックエンドではGoogle Cloud StorageとCloud CDN、Cloud Funtionなどを使用することで、上記のような構成を実現できています。
繰り返しになりますが、ウェブアプリやランディングページ、ブログなどのさまざまな用途が期待できます。
次からは、HTML、CSS、JavaScriptを使用して、webページをデプロイしていきます。
Firebaseのプロジェクトを作成する
- 下記URLから使ってみるを押下し、プロジェクト設定画面へ進みます
- 新たにプロジェクトを作成 or 既存のプロジェクトを作成から選択します
- Google アナリティクスもを紐付けるか選択します
- 既存に所持しているGoogle アナリティクス or 新規に作成するか選択します
①プロジェクト作成or選択
②Google アナリティクスの紐付け確認
③Google アナリティクスの選択
最後にプロジェクトの作成を押下すれば完了です。
次からが、Firebase Hostingの設定になります。
実装手順
Firebase CLI のインストール
Firebase CLIとは、Firebaseの各種プラットフォームをコマンドラインから操作するために必要なツールです。
Node.jsで構築されており、npmを使用してインストールをしていきます。
npm install -g firebase-tools
もしnpmが使用できない場合は、このブログ最下行にあるNode.jsのインストール（Macbook）をご覧下さい。
firebase init で初期化
MacBookなどであればターミナルなどのCLIを開き、任意の場所にプロジェクト用のディレクトリを作成します。
mkdir muscle-firebase-project
次に作成したディレクトリに移動後、そのディレクトリを初期化していきます。
firebase init
firebase init hosting（firebase hostingのみ初期化）
ここで、下記のような画面が出てくるかと思います。
今回はFirebase Hostingのみ作成したいので、矢印キーでHosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploysまで移動し、SpaceキーとEnterキーで選択します。
私はプロジェクトを選択する操作がなかったのですが、それはすでにfirebase loginを使用して、プロジェクトにログインしているためです。
その後いくつか設定するための質問が出てくるので、SpaceキーとEnterキーで進めてください。
質問の内容は公式ホームページを参考にしてください。
https://firebase.google.com/docs/hosting/quickstart?hl=ja#initialize
firebase deploy でデプロイ
firebase init hosting
で初期化が完了した場合、デフォルトではpublicという名のフォルダがターミナル上で作成されます。（命名した場合は別名）
cd piblicで移動し、publicディレクトリでfirebase deploy --only hostingを実行します。（画像のfbdはエイリアスです）
デプロイが完了した後に、自動的に払い出されるURLが確認できます。
こちらはFirebaseのコンソールURL
Project Console: https://console.firebase.google.com/project/<プロジェクトID>/overview
こちらは実際に作成したWebサイトのURL
Hosting URL: https://<プロジェクトID>.web.app
画像を見てわかるように、何も設定せずにHttpsのSSL設定がデフォルトで行われているので、firebaseにコードを記述するだけで、すぐにwebサイトが作成できてしまいます。
アクセスするとこんな感じのデモwebサイトを見ることができます。
Node.jsのインストール（Macbook）
Homebrew経由でNode.js（npm）をインストール方法について解説します。
- 公式ホームページのコマンドをダウンロードし、ターミナルにコピー&ペーストする
- バージョンの確認
- brew -v
- nodebrewをインストールする
- brew install nodebrew
- バージョンの確認
- nodebrew -v
- 最新のバイナリを取得
- nodebrew install-binary latest（最新版）
- nodebrew install-binary stable（安定版）
- バージョンの選択
- nodebrew list
- nodebrew use <バージョンを入力>
- パスを通す（bash or zsh）
- echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
- echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
- パスの読み込み
- source ~/.bash_profile
- source ~/.zsh_profile
参考
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
https://qiita.com/non0311/items/664cf74d9ff4bad9cf46
まとめ
今回はGoogle Cloud Next '23でFirebase関連のセッションをきっかけに、導入向けのハンズオンを実践しました。
その他にも多くのサービスが用意されているFirebaseですので、ぜひ私のブログがFirebaseの導入のきっかけになるように、今後も発信したいと思います。
